
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>如何管理多仓库项目 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>如何管理多仓库项目 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">概念</div>
          <div class="card-question">Git 子模块（Submodule）的核心工作原理是什么？主仓库是如何存储子仓库内容的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">概念</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Git 子模块允许在一个主仓库中嵌套另一个Git仓库。它的核心原理是，主仓库不直接存储子仓库的代码内容，而是存储一个指向外部子仓库特定提交（commit SHA）的引用。</div>
          </div>
          <div class="card-source">来源: 二、Git 子模块（Submodule）- 2.1 什么是 Git 子模块？</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">概念</div>
          <div class="card-question">Git 子树（Subtree）与子模块有何不同？它是如何处理外部仓库代码的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">概念</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Git 子树不是像子模块那样只存储引用，而是直接将另一个Git仓库的代码和历史合并到主仓库的指定目录中。这意味着子仓库的代码成为了主仓库的一部分。</div>
          </div>
          <div class="card-source">来源: 三、Git 子树（Subtree）- 3.1 什么是 Git 子树？</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">对比</div>
          <div class="card-question">根据文档，Git 子模块和子树在代码存储方式和提交历史上最主要的区别是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">对比</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">在代码存储方式上，子模块仅存储引用，而子树直接存储代码。在提交历史上，主仓库不记录子模块的详细提交历史，但会记录子树合并过来的提交历史。</div>
          </div>
          <div class="card-source">来源: 四、Git 子模块 vs. Git 子树：如何选择？（表格）</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">操作</div>
          <div class="card-question">当你克隆一个包含子模块的项目后，子模块目录是空的，需要执行什么命令来初始化并拉取其内容？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">操作</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">需要执行 `git submodule update --init --recursive` 命令。其中 `--init` 用于初始化子模块（仅首次需要），`--recursive` 用于递归更新所有嵌套的子模块。</div>
          </div>
          <div class="card-source">来源: 二、Git 子模块（Submodule）- 2.2 如何使用 Git 子模块？- 2. 初始化和更新子模块</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">操作</div>
          <div class="card-question">如何将一个外部仓库添加为主项目的子树，并将其提交历史压缩成一个？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">操作</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">可以使用 `git subtree add` 命令，并附带 `--squash` 参数。例如：`git subtree add --prefix=libs/common-lib https://github.com/your-org/common-lib.git main --squash`。</div>
          </div>
          <div class="card-source">来源: 三、Git 子树（Subtree）- 3.2 如何使用 Git 子树？- 1. 添加子树</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">在什么场景下，选择使用 Git 子模块（Submodule）会比子树更合适？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">当依赖的仓库是独立维护的第三方库或SDK，需要保持其提交历史的完整和独立性，并且不希望主仓库体积因包含子仓库代码而膨胀时，选择子模块更合适。</div>
          </div>
          <div class="card-source">来源: 四、Git 子模块 vs. Git 子树：如何选择？- 什么时候选择 子模块？</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">在什么场景下，选择使用 Git 子树（Subtree）会比子模块更合适？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">当子仓库与主仓库耦合度较高，希望在主仓库中直接管理所有代码以简化克隆和更新流程，并且不希望团队成员额外学习子模块的复杂操作时，选择子树更合适。</div>
          </div>
          <div class="card-source">来源: 四、Git 子模块 vs. Git 子树：如何选择？- 什么时候选择 子树？</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">当子模块的远程仓库有了新的提交后，主仓库应该如何操作来同步这些更新？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">需要分两步：首先进入子模块目录（例如 `cd libs/common-lib`），执行 `git pull` 拉取最新代码；然后返回主仓库目录，将子模块目录的变更（即更新后的commit引用）通过 `git add` 和 `git commit` 提交到主仓库。</div>
          </div>
          <div class="card-source">来源: 二、Git 子模块（Submodule）- 2.2 如何使用 Git 子模块？- 3. 更新子模块到最新版本</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">Git 子树机制是否支持将在主仓库中对子树代码的修改推送回其原始的远程仓库？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">是的，支持。可以使用 `git subtree push` 命令将主仓库中对子树目录下的代码修改推送回子树自己的远程仓库。例如：`git subtree push --prefix=libs/common-lib https://github.com/your-org/common-lib.git main`。</div>
          </div>
          <div class="card-source">来源: 三、Git 子树（Subtree）- 3.2 如何使用 Git 子树？- 3. 推送主仓库的修改到子仓库</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
